<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50">
<div class="mx-auto max-w-7xl px-4">
<!-- 顶部数据概览 -->
<div class="grid grid-cols-3 gap-4 py-4">
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center">
<h3 class="text-gray-500">资产收入</h3>
<span class="text-2xl font-medium">250812<span class="text-sm text-gray-400 ml-1">CNC</span></span>
</div>
<div class="mt-4 text-sm text-gray-500">
<div class="flex justify-between">
<span>转让: 0%↑</span>
<span>回比: 0%↓</span>
<span>资产: ¥250812</span>
</div>
<div class="mt-2">碳使用: 135891 tCO2e</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center">
<h3 class="text-gray-500">资金收入</h3>
<span class="text-2xl font-medium">0<span class="text-sm text-gray-400 ml-1">¥</span></span>
</div>
<div class="mt-4 text-sm text-gray-500">
<div class="flex justify-between">
<span>转让: 0%↑</span>
<span>回比: 0%↓</span>
<span>收入: ¥0</span>
</div>
<div class="mt-2">碳使用: 114921 tCO2e</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center">
<h3 class="text-gray-500">账户</h3>
<div class="flex items-center">
<el-avatar :size="32" src="https://ai-public.mastergo.com/ai/img_res/c6130092738fe67b2843854b1749740b.jpg" />
<span class="ml-2">admin</span>
</div>
</div>
<div class="mt-4">
<div class="text-sm text-gray-500">账户有效期: 2024-12-31</div>
<div class="mt-2 text-sm text-gray-500">ESG评分: --</div>
</div>
</div>
</div>
<!-- 供应量统计 -->
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="bg-white rounded-lg p-6 shadow-sm">
<h3 class="text-gray-500 mb-4">供应量</h3>
<div class="text-2xl font-medium text-emerald-500">153860<span class="text-sm ml-1">CNC</span></div>
<div class="mt-4 text-sm text-gray-500">
<div>累计值: 90854 tCO2e</div>
<div class="mt-1">新增值: 63006 tCO2e</div>
<div class="mt-1">总市值: ¥12540600</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<h3 class="text-gray-500 mb-4">开发量</h3>
<div class="text-2xl font-medium text-emerald-500">153860<span class="text-sm ml-1">CNC</span></div>
<div class="mt-4 text-sm text-gray-500">
<div>累计值: 90854 tCO2e</div>
<div class="mt-1">新增值: 63006 tCO2e</div>
<div class="mt-1">总市值: ¥12540600</div>
</div>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<h3 class="text-gray-500 mb-4">销售量</h3>
<div class="text-2xl font-medium text-emerald-500">0<span class="text-sm ml-1">CNC</span></div>
<div class="mt-4 text-sm text-gray-500">
<div>累计值: 0 tCO2e</div>
<div class="mt-1">新增值: 0 tCO2e</div>
<div class="mt-1">总市值: ¥0</div>
</div>
</div>
</div>
<!-- 项目进展 -->
<div class="bg-white rounded-lg p-6 shadow-sm mb-4">
<h3 class="text-lg font-medium mb-6">项目进展</h3>
<div class="grid grid-cols-4 gap-8">
<div>
<h4 class="font-medium mb-4">01 项目立项</h4>
<ul class="space-y-3">
<li class="flex justify-between items-center">
<span class="text-gray-600">选择方法学</span>
<el-button type="primary" text>去选择</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">创建项目</span>
<el-button type="primary" text>去创建</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">查看项目情况</span>
<el-button type="primary" text>去查看</el-button>
</li>
</ul>
</div>
<div>
<h4 class="font-medium mb-4">02 项目监测</h4>
<ul class="space-y-3">
<li class="flex justify-between items-center">
<span class="text-gray-600">监测报告</span>
<el-button type="primary" text>去监测</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">监测数据填报</span>
<el-button type="primary" text>去填报</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">查看监测情况</span>
<el-button type="primary" text>去查看</el-button>
</li>
</ul>
</div>
<div>
<h4 class="font-medium mb-4">03 项目开发</h4>
<ul class="space-y-3">
<li class="flex justify-between items-center">
<span class="text-gray-600">编制项目设计文件</span>
<el-button type="primary" text>去编制</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">项目开发进度</span>
<el-button type="primary" text>去查看</el-button>
</li>
</ul>
</div>
<div>
<h4 class="font-medium mb-4">04 项目材料</h4>
<ul class="space-y-3">
<li class="flex justify-between items-center">
<span class="text-gray-600">项目审定报告</span>
<el-button type="primary" text>去上传</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">监测报告</span>
<el-button type="primary" text>去上传</el-button>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">核查报告</span>
<el-button type="primary" text>去上传</el-button>
</li>
</ul>
</div>
</div>
</div>
<!-- 项目统计 -->
<div class="bg-white rounded-lg p-6 shadow-sm mb-4">
<h3 class="text-lg font-medium mb-6">项目统计</h3>
<div class="grid grid-cols-2 gap-8">
<div class="flex space-x-8">
<div id="chart1" class="w-64 h-64"></div>
<div id="chart2" class="w-64 h-64"></div>
</div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="type" label="项目类型" />
<el-table-column prop="actual" label="实际量(tCO2e)" />
<el-table-column prop="expected" label="预期量(tCO2e)" />
<el-table-column prop="count" label="项目数量(个)" />
</el-table>
</div>
</div>
</div>
<!-- 通知区域 -->
<div class="grid grid-cols-2 gap-4 mb-4">
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">碳交易动态</h3>
<el-button type="primary" text>查看更多</el-button>
</div>
<ul class="space-y-3">
<li class="flex justify-between items-center">
<span class="text-gray-600">关于公布2023年度碳排放配额分配方案的通知</span>
<span class="text-gray-400">08-07</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">全国碳市场第三次履约工作圆满完成</span>
<span class="text-gray-400">08-05</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">碳市场助力实现"双碳"目标研讨会顺利举行</span>
<span class="text-gray-400">08-03</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">关于开展碳市场重点排放企业专项培训的通知</span>
<span class="text-gray-400">08-01</span>
</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium">常见问题</h3>
<el-button type="primary" text>查看更多</el-button>
</div>
<ul class="space-y-3">
<li class="flex justify-between items-center">
<span class="text-gray-600">如何进行碳排放配额的申请和分配？</span>
<span class="text-gray-400">08-07</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">碳排放权交易的流程是怎样的？</span>
<span class="text-gray-400">08-05</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">碳市场监测报告如何填写和提交？</span>
<span class="text-gray-400">08-03</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-600">CCER项目开发流程有哪些关键步骤？</span>
<span class="text-gray-400">08-01</span>
</li>
</ul>
</div>
</div>

<!-- 常用功能 -->
<div class="grid grid-cols-4 gap-4 mb-4">
<div class="bg-white rounded-lg p-6 shadow-sm text-center">
<el-icon class="text-3xl text-blue-500 mb-2"><Document /></el-icon>
<h4 class="font-medium">项目立项</h4>
<p class="text-sm text-gray-500 mt-2">高效创建项目，简单便捷的项目管理</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm text-center">
<el-icon class="text-3xl text-blue-500 mb-2"><Monitor /></el-icon>
<h4 class="font-medium">项目开发</h4>
<p class="text-sm text-gray-500 mt-2">全流程项目开发管理，专业指导</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm text-center">
<el-icon class="text-3xl text-blue-500 mb-2"><TrendCharts /></el-icon>
<h4 class="font-medium">项目方法学</h4>
<p class="text-sm text-gray-500 mt-2">适用各类项目的方法学支持</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-sm text-center">
<el-icon class="text-3xl text-blue-500 mb-2"><DataAnalysis /></el-icon>
<h4 class="font-medium">监测数据统计</h4>
<p class="text-sm text-gray-500 mt-2">便捷的数据管理，专业的分析工具</p>
</div>
</div>
</div>
</div>
</template>
<script  setup>
import { ref, onMounted } from '@vue/composition-api';
const echarts = require('echarts');
import { Document, Monitor, TrendCharts, DataAnalysis } from '@element-plus/icons-vue';
const tableData = ref([
{
type: 'PV能',
actual: 10,
expected: 10,
count: 10
},
{
type: '风电',
actual: 12,
expected: 15,
count: 12
},
{
type: '垃圾',
actual: 20,
expected: 5,
count: 20
},
{
type: '生物质',
actual: 33,
expected: 55,
count: 33
},
{
type: '碳汇造林',
actual: 10,
expected: 12,
count: 10
}
]);
onMounted(() => {
     console.log('Dashboard 组件已加载'); 
 const chart1Dom = document.getElementById('chart1');
  const chart2Dom = document.getElementById('chart2');
  // 只做简单非空判断，不写 TypeScript 语法
  if (chart1Dom && chart2Dom) {

    const chart1 = echarts.init(chart1Dom);
    const chart2 = echarts.init(chart2Dom);}
const option1 = {
animation: false,
title: {
text: 'CCER总发量4050',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside'
},
data: [
{ value: 3770, name: '已转移' },
{ value: 1210, name: '存量' }
],
color: ['#10B981', '#3B82F6']
}
]
};
const option2 = {
animation: false,
title: {
text: 'CCER项目量3986',
left: 'center'
},
tooltip: {
trigger: 'item'
},


series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside'
},
data: [
{ value: 2871, name: '一级类' },
{ value: 862, name: '二级类' },
{ value: 253, name: '三级类' }
],
color: ['#10B981', '#3B82F6', '#6366F1']
}
]
};
chart1.setOption(option1);
chart2.setOption(option2);
});
</script>
<style scoped>
.el-table {
--el-table-border-color: #f0f0f0;
--el-table-header-bg-color: #f8fafc;
--el-table-row-hover-bg-color: #f8fafc;
}
</style>